<template>
  <td
    :colspan="item.col"
    :rowspan="item.row"
    :class="{ cellHide: item.hide, activeItem: isActiveItem }"
    :style="{
      tdStyle,
      'background-color': item.style.background,
      width: item.style.width + '%',
      'text-align': item.style['text-align'],
      'vertical-align': item.style['vertical-align'],
    }"
    @contextmenu.prevent="rightClick($event, trIndex, tdIndex)"
  >
    <div class="component-td">
      <span>{{ item.id }}</span>
      <slot :td="item" />
    </div>
  </td>
</template>

<script>
export default {
  name: "fancyTableItem",
  components: {},
  props: {
    item: {
      type: Object,
      default: {},
    },
    trIndex: {
      type: Number,
      default: 0,
    },
    tdIndex: {
      type: Number,
      default: 0,
    },
    tdStyle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  inject: ["getContext"],
  methods: {
    rightClick(e, rowIndex, colIndex) {
      this.$emit("rightClick", e, rowIndex, colIndex);
    },
  },
  computed: {
    isActiveItem() {
      return this.getContext.activeItem.id === this.item.id ? true : false;
      //this.designerActiveItem
    },
  },
};
</script>

<style scoped>
td {
  padding: 0px 6px;
  word-break: break-word;
}

.cellHide {
  display: none;
}

.activeItem {
  border: 2px solid #409eff;
}

.component-td {
  font-size: 12px;
  color: #bbb;
}

.activeItem div span {
  color: #409eff;
}
</style>
